<template>
    <div class="product-sort">
        <ul class="product-list">
            <li v-for="item in productList" :key="item.id" :spu="item.spu">
                <figure>
                    <nuxt-link :to="'/product/detail?id=' + item.spu">
                        <img :src="$getImageUrl(item.img_url, 'largest')" v-lazy="$getImageUrl(item.img_url, 'largest')" />
                        <img v-if="item.img_hover_url" :src="$getImageUrl(item.img_hover_url, 'largest')" />
                    </nuxt-link>

                    <span>
                        <svg-icon name="new" v-if="item.isNew" />
                        <svg-icon name="hot" v-if="item.isHot" />
                    </span>
                    <span position="bottom">
                        <img src="https://img.podpartner.com/static/images-20230202/product-cotton.png" alt="" />
                    </span>
                </figure>
                <h2 v-text="item.name"></h2>
                <h3>
                    <CommonLevelDiscount :price="item.price" :level="item" />
                </h3>
                <p name="size" v-text="item.sizeFormat"></p>
                <p name="color">
                    <em v-for="(color, idx) in item.colorsList" :key="idx" :style="{ backgroundColor: color }"></em>
                </p>
                <p name="time" v-text="'Turnaround time : ' + item.delivery + ' business days'"></p>
                <h4>
                    <span>
                        <nuxt-link :to="'/designer?pid=' + item.spu">Start designing</nuxt-link>
                    </span>
                </h4>
            </li>
        </ul>

        <CommonPage v-show="total > query.limit" :total="total" :current-page.sync="query.page" :page-size="query.limit" @current-change="handleCurrentChange"></CommonPage>
    </div>
</template>

<script>
export default {
    name: "ListSort",
    props: {
        query: {
            type: Object,
            default: () => {
                return {};
            },
        },
        list: {
            type: Array,
            default: () => {
                return [];
            },
        },
        total: { type: Number, default: 0 },
    },
    computed: {
        productList () {
            return this.list.map((item) => {
                let sizeFormat = "";
                let sizeMin = item.size[0];
                let sizemax = item.size[item.size.length - 1];

                if (!sizeMin && !sizemax) {
                    sizeFormat = "- -";
                } else if (sizeMin == sizemax) {
                    sizeFormat = sizeMin;
                } else {
                    sizeFormat = sizeMin + "-" + sizemax;
                }

                return {
                    id: item.id,
                    spu: item.spu,
                    isNew: item.isNew,
                    isHot: item.special_status == 1,
                    img_url: item.img_url,
                    img_hover_url: item.img_hover_url,
                    name: item.name,
                    price: item.price,
                    priceFormat: parseFloat(item.price / 100).toFixed(2),
                    sizeFormat: sizeFormat,
                    colorsList: item.color || [],
                    delivery: item.delivery_time,
                    user_discount: item.user_discount,
                    user_level: item.user_level,
                };
            });
        },
    },
    methods: {
        handleCurrentChange (page) {
            this.$emit("queryChange", { page: page });
        },
    },
};
</script>

<style lang="scss" scoped>
.common-page {
    justify-content: flex-end;
    margin: 0 10px 40px 0;
}

.product-sort {
    display: flex;
    flex-direction: column;
}

.product-list {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    margin: 0 -16px;
    li {
        display: flex;
        flex-direction: column;
        position: relative;
        box-sizing: border-box;
        margin: 0 16px 40px;
        padding-bottom: 18px;
        width: calc(33.33% - 32px);
        background-color: #f8f8f8;
        border-radius: 6px;
        overflow: hidden;
        transform: translateZ(0);
        figure {
            padding-bottom: 100%;
            position: relative;
            background-color: #e8e8e8;
            z-index: 1;

            span {
                position: absolute;
                right: 9px;
                top: 12px;
                svg {
                    width: 24px;
                    height: 24px;
                    margin: 0 3px;
                }
            }
            span[position='bottom'] {
                width: 84px;
                position: absolute;
                left: 0;
                bottom: 8px;
                top: auto;
                transition: all 0.1s;
                img {
                    width: 84px;
                    height: 24px;
                }
            }

            a {
                position: absolute;
                left: 50%;
                top: 0;
                width: 100%;
                height: 100%;
                transform: translateX(-50%);
                transition: all 0.3s;
                img {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    border-radius: 6px 6px 0 0;

                    &:nth-child(2) {
                        opacity: 0;
                        transition: opacity 0.3s;
                        pointer-events: none;
                    }
                }
            }
        }

        h2 {
            min-height: 48px;
            margin: 12px 12px 0;
            font-size: 16px;
            font-family: Roboto;
            color: #000;
            font-weight: 400;
            white-space: pre-wrap;
            text-overflow: ellipsis;
            -moz-text-overflow: ellipsis;
            overflow: hidden;
            opacity: 1;
            transition: opacity 0.3s;
        }

        h3 {
            line-height: 18px;
            font-size: 16px;
            color: #000;
            margin: 18px 12px 0;
            font-weight: 400;
            opacity: 1;
            transition: opacity 0.3s;
            font-family: Roboto;
            font-weight: 400;
            display: flex;
            &::before {
                content: 'From';
                display: inline;
                line-height: 18px;
                margin-right: 3px;
            }
        }

        p {
            margin: 10px 12px 0;
            font-size: 14px;
            font-weight: 400;
            color: #858585;
            line-height: 20px;
            white-space: pre-wrap;
            opacity: 1;
            transition: opacity 0.3s;
            font-family: Roboto;

            &[name='color'] {
                display: flex;
                flex-wrap: wrap;
                margin: 8.5px 10.5px 0;
                em {
                    width: 12px;
                    height: 12px;
                    background: #5c323e;
                    border-radius: 1px;
                    border: 1px solid rgba(0, 0, 0, 0.16);
                    box-sizing: border-box;
                    margin: 1.5px;
                }
            }
            &[name='time'] {
                margin-top: 10.5px;
            }
        }

        h4 {
            position: absolute;
            opacity: 1;
            box-sizing: border-box;
            position: absolute;
            left: 0;
            top: 64px;
            width: 100%;
            height: 100%;

            transition: all 0.3s;
            display: flex;
            flex-direction: column;
            opacity: 0;
            pointer-events: none;

            &::before {
                content: '';
                display: block;
                padding-bottom: 130%;
            }

            span {
                flex: 1;
                padding: 0 20px;
                justify-content: center;
                align-items: center;
                display: flex;
                position: relative;
                pointer-events: all;
            }
            a {
                display: block;
                width: 100%;
                height: 40px;
                border-radius: 6px;
                box-sizing: border-box;
                font-size: 14px;

                background: #ea4c89;

                border: 1px solid #ea4c89;
                color: #fff;
                transition: all 0.2s;
                line-height: 38px;
                text-align: center;
                &:hover {
                    border-color:#c94175;
                    background: #c94175;
                    color: #ffffff;
                }
            }
        }
    }
}

@media (any-hover: hover) {
    .product-list li:hover {
        figure {
            a {
                width: 130%;
                height: 130%;
                img[lazy='loaded'] ~ img {
                    opacity: 1;
                }
            }
            span[position='bottom'] {
                width: 0;
                > * {
                    width: 0;
                }
                opacity: 0;
            }
        }
        h4 {
            top: 0;
            opacity: 1;
        }

        h2,
        h3,
        p {
            opacity: 0;
        }
    }
}

@media (max-width: 960px) {
    .product-list {
        padding-bottom: 16px;
        margin: 0 -6px 0;
        overflow: hidden;

        li {
            width: auto;
            width: calc(50% - 12px);
            margin: 12px 6px 0;
        }
    }

    .common-page {
        justify-content: center;
        margin: 16px 0 32px;
    }
}

@media (max-width: 720px) {
    .product-list {
        margin: 0;
        width: 100%;
        overflow: hidden;
        flex-wrap: nowrap;
        flex-direction: column;
        padding-bottom: 16px;
        li {
            width: auto;
            margin: 12px 0 0;
        }
    }
}
</style>
